.lazy-img {
    background: #e9e9e9 url(/rcp-common/imgs/icon/gray-default-img.png) no-repeat center center;
    background-size: contain;
    position: relative;
    overflow: hidden;
    .light {
        position: absolute;
        z-index: 3;
        left: 0%;
        top: 0;
        bottom: 0;
        width: 100%;
        overflow: hidden;
        transition: left .35s, opacity .35s;
        background: url(/rcp-common/imgs/icon/light.png) no-repeat center top;
        background-size: 100% 100%;
        opacity: 0;
    }
    img {
        opacity: 0;
        height: 100%;
        width: 100%;
        transition: opacity .3s, transform .3s;
    }
    &.visible {
        transform: scale(1);
        background-image: none;
        img {
            opacity: 1;
        }
        &:hover {
            transform: scale(1);
            img {
                opacity: .8;
                transform: scale(1.1);
            }
            .light {
                left: 50%;
                opacity: .7;
            }
        }
    }
    &.error {
        background-image: url(/rcp-common/imgs/icon/gray-error-img.png);
        img {
            opacity: 0;
        }
        &:hover {
            img {
                opacity: 0;
            }
        }
    }
    &.noscale:hover img,
    &.notransform:hover img {
        transform: initial;
    }
    &.notransform img {
        transition: initial;
    }
}